<template>
  <div id="e" style="width: 1000px;height: 500px"/>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from 'echarts';
import axios from "axios";

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "E",

  setup() {

    let xydate;
    let xdate;
    let ydate;
    let zdate;

    onMounted(() => {
      axios.get("/api/e").then((res) => {

        xydate = res.data

        setData()

        console.log(xydate)


        let myChart = echarts.init(document.getElementById("e"));

        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['地区平均消费额', '国家平均消费额']
          },
          xAxis: [
            {
              type: 'category',
              data: xdate,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '地区平均消费额',
              axisLabel: {
                formatter: '{value} ￥'
              },
              scale:true,
            },
            {
              type: 'value',
              name: '国家平均消费额',
              axisLabel: {
                formatter: '{value} ￥'
              },
              scale:true,
            },
          ],
          series: [
            {
              name: '地区平均消费额',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ￥';
                }
              },
              data: ydate
            },
            {
              name: '国家平均消费额',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ￥';
                }
              },
              data: zdate
            }
          ]
        });

      })
    });

    function setData() {
      xdate = xydate.map(v => v.nationname)
      ydate = xydate.map(v => v.totalconsumption)
      zdate = xydate.map(v => v.totalconsumption1)
    }
  }
}
</script>

<style scoped>

</style>